<template>
  <div>
    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标识
            </div>
          </el-col>
          <el-col :span="18">
               <select-model :model.sync="store.current.model" ></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标题
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.label"
              placeholder="label"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              组件属性
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              高度
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              clearable
              v-model="store.current.options.options.height"
              placeholder="输入高度"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              语言
            </div>
          </el-col>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.options.languageType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in languageTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              菜单
            </div>
          </el-col>
          <el-col :span="18">
            <el-select
              v-model="menubar"
              multiple
              collapse-tags
              placeholder="请选择"
              @change="changeMenubar"
            >
              <el-option
                v-for="item in menubarList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <div class="prop-set-title">
              使用表单数据源
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.sourceCode"
              @change="sourceChange"
              clearable
              placeholder="请选择数据源名称"
            >
              <el-option
                v-for="source in sourceList"
                :key="source.code"
                :label="source.name"
                :value="source.code"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <div class="prop-set-title">
              数据源字段绑定
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.sourceBingfield"
              @change="fieldChange"
              clearable
              placeholder="请选择数据源名称"
            >
              <el-option
                v-for="field in sourcefieldList"
                :key="field.code"
                :label="field.name"
                :value="field.code"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">
        <form-config :store="store"></form-config>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import formConfig from "@/low-code/setting/form-config/index.vue";
import clone from "clone";
export default {
  inject: ["getStore"],
  components: { formConfig },
  data() {
    return {
      active: "first",
      menubar:[],
      languageTypeList: [
        {
          label:'英文',
          value: "en",
        },
        {
          label:'中文',
          value: "zh_CN",
        },
        {
          label:'西班牙语',
          value: "es_MX",
        },
        {
          label:'日语',
          value: "ja",
        },
      ],
      menubarList: [
        {
          label:'文件',
          value: "file",
        },
        {
          label:'编辑',
          value: "edit",
        },
        {
          label:'插入',
          value: "insert",
        },
        {
          label:'视图',
          value: "view",
        },
        {
          label:'格式',
          value: "format",
        },
        {
          label:'表格',
          value: "table",
        },
        {
          label:'工具',
          value: "tools",
        },
      ],
    };
  },
  mounted(){
    this.menubar=this.store.current.options.options.menubar.split(' ')
  },
  watch: {
    "store.current.options": {
      handler() {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.$handleStack.push(clone(this.store.root));
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  methods: {
    changeMenubar(){
      console.log(this.menubar);
      this.store.current.options.options.menubar=this.menubar.join(' ')
    },
    modelNameInput(item) {
      this.store.current.model = item.replace(/[\W]/g, "");
    },
    modelNameBlur() {
      if (this.store.current.model == "") {
        this.store.current.model =
          this.store.current.type + "_" + this.store.current.key;
        this.$message("字段标识不能为空！");
      }
    },
    modelNameChange(keyName) {
      if (!keyName) {
        return false;
      }
      let isRepeat = this.store.checkRepeat(keyName);
      if (isRepeat) {
        this.store.current.model =
          this.store.current.type + "_" + this.store.current.key;
        this.$message("该关键字已被使用 请不要重复绑定");
      }
    },
    sourceChange() {
      this.store.current.options.defaultValue = "";
    },
    fieldChange() {
      this.store.meiTuan.initWarehouse();
    },
  },
  computed: {
    sourceList() {
      return Object.values(this.store.formDataSource.sourceMap || {});
    },
    sourcefieldList() {
      if (
        this.store.formDataSource.sourceMap &&
        this.store.current.options.sourceCode
      ) {
        return this.store.formDataSource.sourceMap[
          this.store.current.options.sourceCode
        ]["fields"];
      } else {
        return [];
      }
    },
    store() {
      return this.getStore();
    },
  },
};
</script>

<style scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
</style>
